<template>
  <!-- 首页包含发现、频道、我的 -->
  <div class="home-lists">
    <!-- tab页 -->
    <van-tabs v-model="activeName" color="#BDBEBD" title-active-color="#fff" background="#000"
      title-inactive-color="#7B797B" line-width="44PX" :sticky="true" :animated="true" duration=".3">
      <van-tab title="发现" name="a">
        <discover />
      </van-tab>
      <van-tab title="频道" name="b">
        <lazy-component>
          <channel />
        </lazy-component>
      </van-tab>
      <van-tab title="我的" name="c">
        <lazy-component>
          <my />
        </lazy-component>
      </van-tab>
      <template #nav-left>
        <div class="left iconfont icon-rili">
          <div @click="showPopup" class="eject-but"></div>
          <template v-if="everyday!==null">
            <van-popup v-model="show" close-on-click-overlay closeable close-icon-position="top-left"
              :style="{height:'100%',width:'100%'}" v-lazy:background-image="`${everyday.image_blurred}`"
              @opened="EverydayAnimation">
              <div class="five" :class="down==true?'now-five':'original-five'">
                <div class="img-box">
                  <img v-lazy="`${everyday.image}`" alt="">
                  <div class="month">
                    <h3>{{everyday.time.day}}</h3>
                    <div>
                      <p>{{everyday.time.month}}.</p>
                      <p>{{everyday.time.week}}</p>
                    </div>
                  </div>
                </div>
                <div class="one-sentence">
                  <p>{{everyday.content}}</p>
                </div>
              </div>
            </van-popup>
          </template>

        </div>
      </template>
      <template #nav-right>
        <div class="right iconfont icon-sousuo" @click="showSearchPopup(true)"></div>
        <!-- <van-popup v-model="showSearch" class="searchLayer" :style="{height:'100%',width:'100%'}" duration=".2">
          <div class="search">
            <form action="/">
              <van-search v-model="value" show-action placeholder="请输入要搜索的内容" background="#000" @search="onSearch"
                @cancel="onCancel" @clear="cut" />
            </form>
          </div>
          <div v-show="switchs">
            <div class="hot-search">
              <h1>热门搜索</h1>
              <p><span v-for="ele in  hotSearch" :key="ele.id">{{ele.kw}}</span></p>
            </div>
            <div class="history-search">
              <h1><span>搜索历史</span><span class="icon-shanchu iconfont" @click="clearHistory">清除</span></h1>
              <p><span v-for="(ele,index) in  historySearch" :key="index">{{ele}}</span></p>
            </div>
          </div>
          <div v-show="!switchs">
           <h1>搜索列表</h1>
          </div>
        </van-popup> -->
        <lazy-component>
          <search/>
        </lazy-component>
      </template>
    </van-tabs>
  </div>
</template>

<script>
  import {
    getEveryday
  } from "../api/base"

  import discover from "../components/home/discover.vue";
  import channel from "../components/home/channel.vue";
  import my from "../components/home/my.vue";
  import search from "../components/home/search.vue"
import { mapMutations } from 'vuex';
  export default {
    name: "Home",
    components: {
      discover,
      channel,
      my,
      search
    },
    data() {
      return {
        activeName: "a",
        show: false,
        everyday: null,
        down: false, //弹出框动画，
        // value: '',
        // hotSearch: [],
        // historySearch: [],
        // switchs:true
      };
    },
    methods: {
      showPopup() {
        this.show = true;
      },
     ...mapMutations(['showSearchPopup'])
     ,
      EverydayAnimation() {
        console.log("动画启动");
        this.down = true
      }
    },
    created() {
      getEveryday().then(data => {
        this.everyday = data.data
        console.log(this.everyday);
      })
    }
  };
</script>

<style lang="less" scoped>
  .home-lists {
    .van-tabs {
      & /deep/ .van-tabs__nav--line {
        padding-left: 100px;
        padding-right: 100px;
      }

      & /deep/ .van-tabs__line {
        border-radius: 0;
      }
    }

    .left,
    .right {
      color: #fff;
      position: absolute;
      top: 12px;
    }

    .left {
      left: 12px;

      .eject-but {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
      }

      .van-popup {
        background: no-repeat center center;

        /deep/ i {
          color: #fff;
        }
      }
    }

    .right {
      right: 12px;
    }



    .five {
      margin: 30px 26px 48px 26px;
      border-radius: 6px;
      overflow: hidden;

      .img-box {
        width: 100%;
        height: 336px;
        position: relative;

        img {
          width: 100%;
          height: 100%;
        }

        .month {
          position: absolute;
          left: 24px;
          bottom: 36px;
          display: flex;
          justify-content: center;

          h3 {
            font-size: 28px;
            padding-right: 10px;
          }

          div {
            width: 50px;
            height: 30px;
            font-size: 12px;
            padding: 3px 0 0 10px;
            border-left: 1px solid #fff;
          }
        }

      }

      .one-sentence {
        width: 100%;
        height: 252px;
        text-align: center;
        font-size: 12px;
        color: #000;
        padding-top: 52px;
        box-sizing: border-box;
        background-color: #fff;
      }
    }

    .original-five {
      transform: translateY(-240px);
      opacity: 0;
    }

    .now-five {
      animation: mydown 1s linear;
    }

    @keyframes mydown {
      0% {
        transform: translateY(-240px);
        opacity: 0;
      }

      25% {
        transform: translateY(-180px);
        opacity: .25;
      }

      50% {
        transform: translateY(-120px);
        opacity: .5;
      }

      75% {
        transform: translateY(-60px);
        opacity: .75;
      }

      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
</style>